<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webUrl管理平台</title>
    <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../static/elementui-index.css"/>
    <script src="../static/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/elementui-index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p style="text-align: center;">{{msg}}</p>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="url" label="url" width="180">
        </el-table-column>
        <el-table-column prop="method" label="请求方式" width="180">
        </el-table-column>
        <el-table-column prop="doc" label="接口介绍" width="180">
        </el-table-column>
        <el-table-column prop="enable" label="启用状态">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.enable">启用</el-tag>
                <el-tag type="danger" v-else>禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)" v-if="scope.row.enable">改为禁用</el-button>
                <el-button size="mini" @click="handleEdit(scope.row)" v-else>改为启用</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "项目接口管理平台",
            tableData: [],
            enable: true
        },
        methods: {
            webUrlList() {
                var _this = this;
                axios.get(`http://localhost:9999/web-url/all`)
                    .then(function (response) {
                        _this.tableData = response.data.urls
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            async handleEdit(row) {
                var _this = this;
                if (row.enable === true) {
                    this.enable = false;
                } else {
                    this.enable = true;
                }
                const resp = await axios.get(
                    `http://localhost:9999/web-url/update`, {
                        params: {
                            "webUrl": row.url,
                            "enable": this.enable
                        }
                    }
                )
                if (resp.data.status==='200'){
                    _this.success()
                }else {
                    _this.fail();
                }
                this.webUrlList();
            },
            success() {
                this.$message({
                    message: '更新成功',
                    type: 'success',
                    onClose(){
                        // 可以在提示关闭后做一些操作
                    }
                });
            },
            fail(){
                this.$message({
                    message: '更新失败',
                    type: 'error'
                });
            }
        },
        created() {
            this.webUrlList();
        }
    })
</script>
</html>
